Okay, let's go ahead and take a look at how we can create a GUI similar to the one that we see here
on our screen.
This is the starting menu that was attached to all of those assets in our lecture that we're going to
be using for our game.
But I'm also going to show you how you can create a UI like this for your game from scratch.
So I'm going to go ahead and disable the enable property for all of those UI so we don't see them anymore.
And then I'm going to create a new screen GUI in our starter GUI.
And this can be one of my example starting menus, but I'm not going to name it anything, because this
is just me showing you how you can make UI like this.
So for the background, I would like to set it as an image label, which stores kind of like a blur,
because if you saw with our starting menu, if I re-enable it, you can see that there's this kind of
blur to the background that's in our UI, and I use that with an image label.
So with this image label that's going to act as our background, first I'm going to convert the size
and position to scale, and this plugin to convert the size and position from either scale to offset
will be attached to the lecture.
So you can go ahead and install this into studio, and you'll find it underneath your plugins tab.
And you can open it up.
It'll be auto scale light.
And you can open up unit conversion to be able to convert between scale and offset.
But I'm going to convert this image label to scale.
And then we can go ahead and change the size to be the entire size of our screen.
So we can set one for the x axis and then one for the y axis.
Another important property we're going to have to change is this property of ignore guy inset.
And we're going to set that as true.
And the guy inset is that little bar that appears at the top of your screen that contains the Roblox
icon as well as the chat icon.
So if we ignore it, that means this guy is going to cover our entire screen, which is what we want.
Now that we have this UI covering our entire screen, the next thing we can go ahead and do is open
up the toolbox, and we can go over to the image section to find a boar image to apply to the background.
So I'm just going to go ahead and search for boar.
And I'll get back with you when I find something interesting.
So actually right here, I found the original image that I used for the background of my UI.
It's called border.
So I'm going to right click this.
I'm going to copy the asset ID and then I'm going to update the image property inside of my image label.
To be equal to that new ID I'll hit enter.
Now, as you can see, I have this border applied to my screen.
And then I'm going to set the background transparency of one.
So we get rid of that whiteness.
And now as you can see we have this border effect kind of applied to our screen.
And of course we can also change the color of this border a little bit too.
So if we want it to be a little bit darker, I can set the color to be closer to black.
And now what we could go ahead and do is we can go ahead and insert inside of this image, label other
stuff that we want to be on our screen, for example, the title of our game, as well as those three
buttons for playing spectating as well as a store button.
So I'll create a new text label in here.
And this text label is going to be for the title of my game.
Again, I'm going to convert this, uh, size and position to scale.
And this time I'm going to update the anchor point of this text label to be in the middle of my object.
So I'm going to set the anchor point to be 0.5 and 0.5 on the x and y axes.
And as you can see my image label shifted.
But then I'm going to update the position to be in the middle of my screen.
So for scale that's going to be 0.5 on the x axis and then 0.5 on the y axis.
And as you can see, my anchor point is in the center of my text label.
So now this text label is perfectly centered in my screen.
If I want to move it up more, then I can go ahead and change the position to maybe be like 0.25.
And now what I can go ahead and do is I can change the background transparency to be fully transparent.
And then I can enable the text scale property to allow the text to scale with my screen.
So for example, if my screen were to shrink down, as you can see, the text shrinks down with it.
But now that we have this text scale, we can go ahead and pick whatever kind of font we want for our
text label.
For example, maybe you want to set it to the font of, I don't know, luckiest guy.
There's our font and we can go ahead and type out the name of our game, which is I'm just going to
call it waves.
So our game is called waves.
Very cool.
And of course if we want to make this text bigger, we can also resize our text label using these bars
up here.
So I can just move these a bit and resize my text label.
And of course doing this is shifting the position of my text label.
So I'll make sure to recenter it back into the middle of my screen.
Do something like that.
And now you might be wondering, okay, cool.
We have this text on our screen.
How can I add that cool color gradient that we had in our original UI?
Because if we go and look back at our original starting menu, if I enable it, we have this cool red
to green color gradient.
How do I add that?
Well, I'm glad you asked.
We can add a new child of our text label, and this child is called a UI gradient right here.
And this allows us to create gradient colors for our text or even for other things in your UIs like
frames and such.
You can create a color gradient.
Now in order for this color gradient to be visible, I'm going to have to update the color of my text
to be completely white.
And now with my UI gradient, I can go ahead and pick some kind of color scheme.
So what you actually want to do is you want to open these three dots here, and it's going to give you
this gradient right here that you can go ahead and update the color for.
So on this left side here I can pick a new color for example.
Maybe I want it to be like we had red in the original one.
So I'll do a nice dark red close out of there.
And then for this other end of the color gradient, maybe I want it to be green.
So I'll do like a nice bright green and then we can close out of that.
You can add more colors by clicking and creating a new icon in between.
You can add different colors to create whatever kind of color gradient you want.
But if you accidentally added one of these, you can just go ahead and click delete.
And now it's gone.
But here we have our cool little neat color gradient going across our text.
We can also manipulate this color gradient in many ways, such as offsetting it or rotating it.
So if I rotated this color gradient by 90 degrees, as you can see now it's going up and down rather
than from left to right.
But I'll set it back to the left to right because I like that one more.
And now we have the title for our game.
Let's go ahead and create some buttons.
So to create a button we can create a new text button.
And here's our text button.
We're going to do the exact same thing.
We'll set the anchor point to be in the middle of the object.
We'll convert size and position to scale, and we're going to go ahead and place it in the center of
the screen.
So we'll do 0.5.
And then we can perhaps set it to be at maybe point four, something like that.
And then for these text buttons, I would actually like to keep the background for the button.
But I would like to also color the background with a gradient so we can add another UI gradient and
go ahead and manipulate the background color for this text button.
So.
What we can do is we can actually just copy the gradient that we've already made and then just paste
that in there and delete the previous.
And as you can see now we have our cool little gradient on our text button.
For this text button can go ahead and be like my play button.
Again, we already have the UI for our game, but I'm just showing you how you can create your own UI
and rename everything, right?
So we have our play button with our UI gradient.
We have our title with our UI gradient.
If we want to go ahead and round off the corners of this UI button, then we can go ahead and apply
a UI corner right here.
And this UI corner has two different properties.
One is scale or one is offset.
So if you remember in the previous lecture where I talked about UI elements, is that scale is going
to represent basically the percentage along your screen regardless of resolution.
And the offset is going to represent actually the amount in pixels most of the time.
For UI corner, you're probably going to want to do an offset just so you keep like a standard or consistent
cornering of your UI objects.
So for example, if I set it to be 15, then I have a UI cornering.
Then I have a UI corner of 15 studs.
So there's my corner button.
But if you decide to do scale instead, like you did 0.25, if you were to resize your screen, then
that scaling would um, of course be different.
So as you can see, you can barely.
See that UI cornering.
Because the scaling is being weird when we're resizing the screen like this.
But if I decided to keep my UI corner at a constant offset of like maybe 30 pixels, and then if I go
and resize my screen, as you can see, it will constantly keep that cornering of 30 pixels no matter
what the size is of my screen.
But I'm just going to set it to like ten.
That'll probably be good.
And then from this point we can go ahead and manipulate stuff like the text inside of it, so we can
go ahead and change the font to like maybe bangers, make sure the text is scaled and we can say something
like play, this is our play button.
And of course we can also manipulate like the text transparency.
So if we want it to be more transparent to kind of like have that gradient pass through it, or if we
would like the gradient to affect the text itself, we can set its color to white.
As you can see now, the gradient is also affecting the text.
And the text is basically blending in with the button.
But if I make it a little bit darker, as you can see now, you can see the text, but still it has
that gradient being applied to it.
But I'll just keep it at black just so there's like a contrast between the text and the background.
And then another thing we can do with this play button is we can keep it at a specific aspect ratio.
Because if you saw earlier when we were resizing our screen.
You can see our button is reshaping itself very strangely.
And that's because since we're using scale for the size of this UI button.
If we go ahead and look at the button.
On the x axis.
When we look at the size, we want it to be 12% across the x axis on our screen.
Well, when we start resizing our screen like this, as you can see, it's still maintaining that 12%
across the screen, right?
As you can see, it's still remaining the same.
But because the aspect ratio of our screen is changing, or the dimension on the y axis is changing,
it's causing our UI button to start looking a little bit weird, right?
So if we want to prevent those issues, what we can do is we can add something called a UI aspect ratio
constraint.
And that's going to constrain the size of our button to a specific aspect ratio.
So as you can see the aspect ratio is one.
So this is 1 to 1.
If I set it to two then the aspect ratio is two to 1 or 5 is five to 1 or 4 4 to 1.
And now if I resize my screen my button is always going to keep that consistent aspect ratio.
So now what we can do is we can just basically duplicate this button multiple times to create our other
buttons.
This one could be our like spectate button.
So spectate button and then we'll have a store button.
And then we can just move these around.
So I'll shift this one down.
Words.
We'll set it to like 0.6.
That's too far.
Maybe something like 0.5.
We could do something like that.
And then for the other one we could do like 0.6 or whatever however you want to set it up.
Now you have each of your different buttons.
We can change the text in each one of these.
So this is our spectate button.
And then this one is our store button.
And then if you want to make the play button a little bit larger we can go ahead and resize it.
Make it a bit bigger.
So there you go.
You have your play button, your spectate button.
You got your store button.
They each have their own color gradients to it.
And we got that nice blur in the background.
So yeah, that's kind of the basic process for how we create UI in our games.
Let me go ahead and disable the visibility.
And then we can go back to our original UI for our game.
As you can see, it's basically almost the exact same thing we did.
We have cornering on our buttons.
We have text, the title of our game.
And then of course, there's some other things in our UI such as the actual frame for spectating.
So this one is very simple.
We just have some text here.
We have a text button down here, and then we have some image buttons that players can click when they
go and they start spectating.
That's for the spectating frame.
We also have a store frame.
This one's a little bit more interesting, because what we have in here is a scrolling frame.
And a scrolling frame basically allows us to put stuff inside of it.
And then if the amount of stuff that we put inside of it exceeds the size of the scrolling frame, well,
then it'll add a scroll wheel that we can actually go and scroll through the different items.
So for example, here, if I duplicate and put a bunch of stuff inside of this frame, as you can see,
the scrolling bar appears, and now I can go ahead and scroll through those different items inside of
my frame.
And to set up our scrolling frames in that way is that we add these constraints.
For example, this one's called a UI grid layout, and it tells us, okay with the elements that we're
putting inside of our scrolling frame, what we would like the size of each of those cells to be.
So as you can see here, I've set it to be equal to 0.5 on the x and then one on the y axis.
And then I'm subtracting it.
By these offset amounts or a defined amount in pixels.
And the reason I do that is that way I keep a consistent gap between the elements inside of my UI,
and that's because I'm adding this padding here.
I want to keep a gap of exactly six pixels between my different elements on the x and y axis.
So as you can see, there's always a gap of six pixels between my different elements.
If I didn't, uh, change the size.
On either the x or the y axis.
As you can see, my UI grid layout is acting funky because I'm not accounting for the padding that I'm
adding between my different pieces of UI.
So I want to make sure that I subtract the value on both the x and the y axis, so I keep that consistent
six pixel gap between each element inside of my scrolling frame, and the scrolling frame updates its
size.
Because there is a property in here called Automatic canvas size, where we have told it to automatically
update its size on the y axis when there are enough descendants or UI elements to warrant it to resize
itself.
So as you can see, it's just resized itself.
And if I keep adding more, it's continuing to resize itself to accommodate these other, uh, UI elements
that are filling up inside of our scrolling frame.
So there's a lot of neat things that you can do with UI, and it's basically just up to your creative
preference on how you want your UI to look and what you want your UI to do.
So feel free to go and manipulate this guy that I have attached to the game assets.
You can go ahead and change the color or change the fonts, uh, and whatever other properties you want
to change, and see what kind of UI you can come up with for this project.
Other than that, that's kind of my process for creating UI elements on the screen.
And I'll see you in the next lecture.